<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>George Brown College's School of Design - Web Design and Development courses using HTML5, CSS3 and JavaScript
  </title>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
    rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Main CSS -->
  <link href="styles/main.css" rel="stylesheet">
</head>

<body>

  <!-- <div class="row">
        <div class="col">
            <h1>GBC - School of Design</h1>
        </div>
    </div> -->

  <header>
    <div class="header-top"> <img src="images/gbc-logo.svg" alt="George Brown College logo" class="logo">
      <nav class="main-nav">
        <ul>
          <li><a href="#">
              <img src="./images/home.png" alt="" class="nav-icon">
              home
            </a></li>
          <li><a href="#">
              <img src="./images/about.png" alt="" class="nav-icon">
              about
            </a></li>
          <li><a href="#">
              <img src="./images/programs.png" alt="" class="nav-icon">
              programs
            </a></li>
          <li><a href="#">
              <img src="./images/contact.png" alt="" class="nav-icon">
              contact
            </a></li>
        </ul>
      </nav>
    </div>
    <div class="hero-text-box">
      <h1> Welcome to School of Design<br>
        Best of Design in 2024! </h1>
      <a href="#" class="btn btn-full">Click here to sign up!</a> <a href="#" class="btn btn-inverse">Show me more</a>
    </div>
  </header>
  <!-- SECTION FEATURED -->
  <section class="section-featured">
    <h1>Featured Student &mdash; Ada Liu</h1>
    <!-- <hr> -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore alias nemo voluptatum quaerat dolores illo
      molestias, eaque facere iure ex quasi aut natus quae delectus asperiores quo dignissimos cumque! Et?</p>
    <aside>
      <div class="content promo1"> <i class="fa-solid fa-newspaper"></i>
        <h2>What's New</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis alias, asperiores omnis nulla, soluta
          placeat minima sapiente ea dolorem rerum, nemo molestias. A dolor blanditiis quaerat recusandae aliquid
          delectus nulla!</p>
      </div>
    </aside>
    <aside>
      <div class="content promo2"> <i class="fa-solid fa-magnifying-glass"></i>
        <h2>Check out courses</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis alias, asperiores omnis nulla, soluta
          placeat minima sapiente ea dolorem rerum, nemo molestias. A dolor blanditiis quaerat recusandae aliquid
          delectus nulla!</p>
      </div>
    </aside>
    <aside>
      <div class="content promo3"> <i class="fa-solid fa-gear"></i>
        <h2>Tools of the trade</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis alias, asperiores omnis nulla, soluta
          placeat minima sapiente ea dolorem rerum, nemo molestias. A dolor blanditiis quaerat recusandae aliquid
          delectus nulla!</p>
      </div>
    </aside>
  </section>

  <!-- SECTION POTFOLIO -->
  <section class="section-portfolio">
    <h1>Student Work</h1>
    <ul class="portfolio-showcase">
      <!-- <li><figure><a href="#"><img src="images/1.jpg" alt="Some description"></a></figure></li> -->
      <li>
        <figure><img src="images/1.jpg" alt="Some description"></figure>
      </li>
      <li>
        <figure><img src="images/2.jpg" alt="Some description"></figure>
      </li>
      <li>
        <figure><img src="images/3.jpg" alt="Some description"></figure>
      </li>
      <li>
        <figure><img src="images/4.jpg" alt="Some description"></figure>
      </li>
    </ul>
    <ul class="portfolio-showcase">
      <li>
        <figure><img src="images/5.jpg" alt="Some description"></figure>
      </li>
      <li>
        <figure><img src="images/6.jpg" alt="Some description"></figure>
      </li>
      <li>
        <figure><img src="images/7.jpg" alt="Some description"></figure>
      </li>
      <li>
        <figure><img src="images/8.jpg" alt="Some description"></figure>
      </li>
    </ul>
  </section>

  <!-- SECTION TESTIMONIALS -->
  <section class="section-testimonials">
    <section class="section-testimonials-inner">
      <h1>We listen to what our students say</h1>
      <article>
        <blockquote>
          <cite><img src="images/student1.png">
            <p class="student-name">
              Student Name
            </p>
          </cite>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam cumque fuga obcaecati quis animi consectetur
            at repudiandae facere tempora explicabo. Quae, aut perferendis blanditiis atque voluptate omnis alias
            voluptas
            modi.
          </p>
        </blockquote>
      </article>
      <article>
        <blockquote>
          <cite><img src="images/student2.png">
            <p class="student-name">
              Student Name
            </p>
        </cite>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam cumque fuga obcaecati quis animi consectetur
            at repudiandae facere tempora explicabo. Quae, aut perferendis blanditiis atque voluptate omnis alias
            voluptas
            modi.
          </p>
        </blockquote>
      </article>
      <article>
        <blockquote>
          <cite><img src="images/student3.png">
            <p class="student-name">
              Student Name
            </p>
        </cite>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam cumque fuga obcaecati quis animi consectetur
            at repudiandae facere tempora explicabo. Quae, aut perferendis blanditiis atque voluptate omnis alias
            voluptas
            modi.
          </p>
        </blockquote>
      </article>
    </section>
  </section>

  <!--    SECTION STEPS-->
  <section class="section-steps">
    <h1>There's a GBC app for that</h1>
    <section class="steps-box-left"><img src="images/app-phone.png" alt="GBC app" class="app-screen"></section>
    <section class="step-box-right">
      <div class="works-step">
        <div>1</div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
      </div>
      <div class="works-step">
        <div>2</div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
      </div>
      <div class="works-step">
        <div>3</div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
      </div>

      <a href="#" class="btn-app"><img src="images/download-app-iphone.png"></a> <a href="#" class="btn-app"><img
          src="images/download-app-android.png"></a>
    </section>
  </section>
</body>
</ht>
<section class="section-campus">
  <h1>Find us at</h1>
  <aside>
    <div class="campus promo1"><img src="images/st_james.jpg" alt="School of Design">
      <h2><i class="fa-sharp fa-solid fa-location-dot"></i>of Design</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consectetur consequatur veritatis!
        Voluptatum adipisci nobis aliquid omnis aperiam, sed sit quisquam nesciunt quae velit reprehenderit, enim
        numquam odio excepturi id.</p>
    </div>
  </aside>
  <aside>
    <div class="campus promo2"><img src="images/st_james.jpg" alt="School of Design">
      <h2><i class="fa-sharp fa-solid fa-location-dot"></i>School of Design</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consectetur consequatur veritatis!
        Voluptatum adipisci nobis aliquid omnis aperiam, sed sit quisquam nesciunt quae velit reprehenderit, enim
        numquam odio excepturi id.</p>
    </div>
  </aside>
  <aside>
    <div class="campus promo3"><img src="images/st_james.jpg" alt="School of Design">
      <h2><i class="fa-sharp fa-solid fa-location-dot"></i>School of Design</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consectetur consequatur veritatis!
        Voluptatum adipisci nobis aliquid omnis aperiam, sed sit quisquam nesciunt quae velit reprehenderit, enim
        numquam odio excepturi id.</p>
    </div>
  </aside>
  <aside>
    <div class="campus promo4"><img src="images/st_james.jpg" alt="Some description">
      <h2><i class="fa-sharp fa-solid fa-location-dot"></i>School of Design</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita consectetur consequatur veritatis!
        Voluptatum adipisci nobis aliquid omnis aperiam, sed sit quisquam nesciunt quae velit reprehenderit, enim
        numquam odio excepturi id.</p>
    </div>
  </aside>
</section>

<!-- SECTION FORM -->
<section class="section-form">
  <h1>Contact Us</h1>

  <form method="post" action="#" class="contact-form">
    <label for="name">Name</label><br>
    <input type="text" name="name" id="name" placeholder="your name" required>

    <label for="email">Email</label><br>
    <input type="email" name="email" id="email" placeholder="your email" required>

    <label for="find-us">What's your favourite program?</label><br>
    <select name="find-us" id="find-us">
      <option value="html5">html5</option>
      <option value="css3">css3</option>
      <option value="js" selected>js</option>
    </select>

    <label for="newsletter">Sign up for newsletter</label><br>
    <input type="checkbox" name="newsletter" id="newsletter" checked>Yes please

    <label for="comments">Comments</label><br>
    <textarea name="comments" id="comments" placeholder="your comments"></textarea>

    <input type="submit" value="Send away">

  </form>
</section>

<footer>
  <div class="section-footer">
    <nav>
      <ul class="footer-nav">
        <li>
          <a href="#">
            about
          </a>
        </li>
        <li><a href="#">
            blog
          </a>
        </li>
        <li>
          <a href="#">
            media
          </a>
        </li>
        <li>
          <a href="#">
            app
          </a>
        </li>
      </ul>
    </nav>




    <nav>
      <ul class="footer-social">
        <li><a href="#"><i class="fa-brands fa-square-facebook"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-square-twitter"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-square-instagram"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
      </ul>
    </nav>

    <p>Copyright GBC 2024</p>
  </div>



</footer>


</body>

</html>